<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
<meta charset="utf-8" name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>活动报名</title>
 	<link rel="stylesheet" href="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrap/dist/css/bootstrap.min.css">  
    <link href="http://carowner.yonyouauto.com/fs01/ase/v1/components/mobisscroll/css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
    <link rel="stylesheet" href="http://carowner.yonyouauto.com/fs01/ase/v1/components/picker/iosSelect.css" type="text/css" />
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/py.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/mobisscroll/js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/hammer/hammer.min.js"></script>
    <script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/hammer/jquery.hammer.js"></script>
    
    <script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrapValidator/js/bootstrapValidator.js"></script>
     <script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/picker/iscroll.js"></script>
     <script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/picker/iosSelect.js"></script>
     <script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/vue/vue.min.js"></script>
     <script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/layer/layer.js"></script>
    <script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/common.js"></script>
    <script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/Gmccui.js"></script>
    
    <script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/wechatCommon.js?t=2017072"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6WLRtwjdIPrXW5FaNIsgdZG038pLb84Z"></script>
	<style> 
a{ text-decoration:none;color:#000;}
.product-head h1{font-size: 14px;font-family: Arial, Helvetica, sans-serif;margin-bottom: 3px;margin-left: 3px;}
.product-head{font-size: 12px;padding: 4px;background-color: #ccc;width: 235px;}
.filterform input{font-size: 15px;padding: 3px;border: 1px solid #999;}
/* li{padding: 0;margin: 3px;list-style: none;width: 100%;}
li a{color: #000;font-family: Arial, Helvetica, sans-serif;font-size: 11px} */
ul{margin: 0;padding: 0;}
.clear{clear: both;}
body{/* background-color:#fff; */color:#777;}

.top-header{
	width: 100%;
    display: inline-block;
    background: url(http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/td1.png) 10px 12px no-repeat;
    background-size: 15px 15px;
    height: 35px;
    background-color: #3d3d3d;
    color: #fff;
    padding: 10px 30px;
    letter-spacing: 2px;
    font-size: 16px;
}

.drivider-line-10{
	height:10px;
	display:inline-block;
	width:100%;
	background-color:#ddd;
	margin:0px 0px 5px;
	
}
.drivider-line-1{
	height:1px;
	display:inline-block;
	width:100%;
	background-color:#ddd;
	margin:0px 0px 12px;
	
}

/* #bmContent input.form-control{
	border:0px;
	box-shadow:none;
} */

#bmContent label.control-label{
	line-height:29px;
}

#bmContent .chose-text{
	text-align:right;
	padding-right: 25px;
}

.circle{
	width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    padding-top: 25px;
}
.circle.circle-success{
	border: 3px solid #14d414;
	color: #14d414;
}

.circle.circle-error{
	border: 3px solid #f5342e;
	color: #f5342e;
}

.circle.circle-success:after{
	content: "\2713";
    font-size: 30px;
    font-weight: 300;
}

.circle.circle-error:after{
	content: "\2715";
    font-size: 30px;
    font-weight: 300;
}

.error-text,.success-text{
	text-align:center;
    padding: 5px 0px;
}

.error-text{
	color: #f5342e;
}

.success-text{
	color: #14d414;
}

.padding-top-30{
	padding-top:30px;
}

.radio-label{
	text-align:right;
	padding-right:13px;
}


.ios-select-widget-box header.iosselect-header a{
opacity:1;
}

.btnbtn1{background-color: #999; color: #fff; width: 100%; height: 45px; border-style: none; border-width: 0; border-radius: 5px;font-size:18px;margin-top:12px}
</style> 
<script type="text/javascript">

</script>
</head>
<body>    
<div id="bmContent" class="container" style="overflow-x:hidden;">
	<div class="row">
    	<div class="top-header">活动报名</div>
    </div>
    <!-- <div class="row">
    	<div class="col-xs-12">
    		<h5>欧蓝德试驾会火热进行中</h5>
    		<p><span>销售店：</span><span>广汽三菱上海嘉诚店</span></p>
    		<p><span>时间：</span><span>2016-09-30至2016-11-10</span></p>
    	</div>
    	<div class="drivider-line-10"></div>
    </div> -->
    
    <!-- 报名信息开始 -->
    	<div class="row">
    		<div class="col-xs-12">
    			<form class="form-horizontal" style="padding-top: 10px;">
					  <div v-for="bi in bmItems" style="">
					    <!-- <label class="col-xs-5 control-label" v-text="bi['fieldZhName']"></label>
					    <div class="col-xs-7"> -->
					    	<div v-if="bi['type']===0">
					    		<div class="input-group" style="width: 100%; ">
					    			<div v-if="bi['fieldName']==='applyName'">
					    				<!-- <input type="text" v-model="bmModel[bi['fieldName']]"  class="form-control" v-bind:placeholder="'请输入'+bi['fieldZhName']" style="background-color: #fff; width: 100%; height: 50px; background-image: url(http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/loren.png); background-repeat: no-repeat; background-size: 50px auto; text-indent: 50px; border-top-style: none; border-right-style: none; border-bottom: 1px solid #eee; border-left-style: none; border-top-right-radius: 5px; border-top-left-radius: 5px;"> -->
					    				<input type="text" v-model="bmModel[bi['fieldName']]"  class="form-control" v-bind:placeholder="'请输入'+bi['fieldZhName']" style="background-color: #fff; width: 100%; height: 50px; background-image: url(http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/loren.png); background-repeat: no-repeat; background-size: 50px auto; text-indent: 50px; border-top-style: none; border-right-style: none; border-bottom: 1px solid #eee; border-left-style: none; border-top-right-radius: 5px; border-top-left-radius: 5px;">
					    			</div>
					    			<div v-else-if="bi['fieldName']==='applyTel'">
					    				<input type="text" v-model="bmModel[bi['fieldName']]"  class="form-control" v-bind:placeholder="'请输入'+bi['fieldZhName']" style="background-color: #fff; width: 100%; height: 50px; background-image: url(http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/Mobile.png); background-repeat: no-repeat; background-size: 50px auto; text-indent: 50px; border-top-style: none; border-right-style: none; border-bottom: 1px solid #eee; border-left-style: none; border-top-right-radius: 5px; border-top-left-radius: 5px;">
					    			</div>
					    			<div v-else>
					    				<input type="text" v-model="bmModel[bi['fieldName']]"  class="form-control" v-bind:placeholder="'请输入'+bi['fieldZhName']" style="background-color: #fff; width: 100%; height: 50px; background-repeat: no-repeat; background-size: 50px auto; text-indent: 50px; border-top-style: none; border-right-style: none; border-bottom: 1px solid #eee; border-left-style: none; border-top-right-radius: 5px; border-top-left-radius: 5px;">
					    			</div>
					    		</div>
					    	</div>
					    	<div class="radio-label" v-else-if="bi['type']===1">
					    		<label class="radio-inline" v-for="(radio,index) in bi['vals'].split(';')">
								  <input type="radio" v-bind:name="bi['fieldName']" v-model="bmModel[bi['fieldName']]" v-bind:value="radio"> <span v-text="radio"></span>
								</label>
					    	</div>
					    	
					    	<div v-else-if="bi['type']===2">
							  <div class="date-wrap text-right">                 
								    <input type="text" class="form-control" v-bind:name="bi['fieldName']" v-model="bmModel[bi['fieldName']]" v-on:click="datePicker($event)" v-bind:placeholder="'请选择'+bi['fieldZhName']">           
								</div>
							</div>
					    <!-- </div> -->
					  </div>
					  <!-- <div class="form-group">
					    <label class="col-xs-2 control-label">电话</label>
					    <div class="col-xs-10">
					      <input type="text" class="form-control" placeholder="电话">
					    </div>
					  </div>
					  
					  <div class="form-group">
					    <label class="col-xs-2 control-label">性别</label>
					    <div class="col-xs-10 chose-text">
					      <span id="sex"></span><i class="glyphicon glyphicon-menu-right"></i>
					    </div>
					  </div>
					  
					  <div class="form-group">
					    <label class="col-xs-2 control-label">人数</label>
					    <div class="col-xs-10">
					      <input type="text" class="form-control" placeholder="人数">
					    </div>
					  </div>
					  
					  <div class="form-group">
					    <label class="col-xs-2 control-label">年龄</label>
					    <div class="col-xs-10">
					      <input type="text" class="form-control" placeholder="年龄">
					    </div>
					  </div>
					  
					  <div class="form-group">
					    <label class="col-xs-2 control-label">车型</label>
					    <div class="col-xs-10 chose-text">
					      <span id="sex"></span><i class="glyphicon glyphicon-menu-right"></i>
					    </div>
					  </div> -->
					  
					 <div class="form-group">
					    <div class="col-xs-12">
					      <button id="bm" type="button" class="btn btn-default btn-lg btn-block" v-on:click="commitBmInfo" style="background-color:#3790f3;color:#fff;margin-top:12px">提交</button>
					    </div>
					  </div>
					</form>
    		</div>
    	</div>
    <!-- 报名信息结束 -->
    
</div>

<!-- <div class="container hidden" id="rsContent">
	<div class="row">
	    	<div class="top-header">活动报名</div>
	    </div>
		报名成功
    <div class="row">
    	<div class="col-xs-12 padding-top-30" v-if="errorCode == 1">
    		<div class="circle circle-error"></div>
    		<div class="error-text text-center">报名失败</div>
    	</div>
    	<div class="col-xs-12 padding-top-30" v-if="errorCode == 0">
    		<div class="circle circle-success"></div>
    		<div class="success-text text-center">恭喜您，报名成功</div>
    	</div>
    </div>
    报名成功结束
</div> -->
	
<script>
var selectDateDom = $('.date-wrap input');
var showDateDom = $('#showDate');
// 初始化时间
var now = new Date();
var nowYear = now.getFullYear();
var nowMonth = now.getMonth() + 1;
var nowDate = now.getDate();
showDateDom.attr('data-year', nowYear);
showDateDom.attr('data-month', nowMonth);
showDateDom.attr('data-date', nowDate);
// 数据初始化
function formatYear (nowYear) {
    var arr = [];
    for (var i = nowYear - 30; i <= nowYear + 30; i++) {
        arr.push({
            id: i + '',
            value: i + '年'
        });
    }
    return arr;
}
function formatMonth () {
    var arr = [];
    for (var i = 1; i <= 12; i++) {
        arr.push({
            id: i + '',
            value: i + '月'
        });
    }
    return arr;
}
function formatDate (count) {
    var arr = [];
    for (var i = 1; i <= count; i++) {
        arr.push({
            id: i + '',
            value: i + '日'
        });
    }
    return arr;
}
var yearData = function(callback) {
        callback(formatYear(nowYear))
}
var monthData = function (year, callback) {
        callback(formatMonth());
};
var dateData = function (year, month, callback) {
    //setTimeout(function() {
        if (/^1|3|5|7|8|10|12$/.test(month)) {
            callback(formatDate(31));
        }
        else if (/^4|6|9|11$/.test(month)) {
            callback(formatDate(30));
        }
        else if (/^2$/.test(month)) {
            if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
                callback(formatDate(29));
            }
            else {
                callback(formatDate(28));
            }
        }
        else {
            throw new Error('month is illegal');
        }
};

var Gmccui = new Gmccui();
var apiUrl = [
	{"id":"bmItems","url":"activityItems"},//报名资料录入项
	{"id":"bmCmt","url":"insertPotentialUser"}//报名资料提交项
];
var bmContentData = {"bmItems":[],"bmModel":{},"bmLogic":{"show":"false","success":"false"}};

Gmccui.setHeaderMap({"Cookie":document.cookie});
Gmccui.setDomainUrl(getRootPath()+"/information/api/v1/sharepage/");
//Gmccui.setDomainUrl("http://10.180.104.192:9002/information/api/v1/");
Gmccui.setMutiApi(apiUrl);
Gmccui.getData("bmItems",{"naiId":Gmccui.getQueryValue("naiId")},function(_callback){
//Gmccui.getData("bmItems",{"naiId":207},function(_callback){
	var _temp = [];
	for(var i=0,len=_callback.length;i<len;i++){
		var _item = _callback[i];
		var fieldName = Gmccui.toCamels(_item['fieldName']);
		_item['fieldName'] = fieldName;
		var applyId = _item['applyId'];
		var naiId = _item['naiId'];
		bmContentData.bmModel[fieldName] = "";
		bmContentData.bmModel["naiId"] = naiId;
		_temp.push(_item);
	}
	bmContentData.bmItems = _temp;
	
})
 new Vue({
            el: '#bmContent',
            data: bmContentData,
            methods:{
            	datePicker:function(element){
            		
            		var $element = element.target;
            		var oneLevelId = showDateDom.attr('data-year');
            	    var twoLevelId = showDateDom.attr('data-month');
            	    var threeLevelId = showDateDom.attr('data-date');
            		var iosSelect = new IosSelect(3, 
            		        [yearData, monthData, dateData],
            		        {
            		            title: '时间选择',
            		            itemHeight: 35,
            		            relation: [1, 1],
            		            oneLevelId: oneLevelId,
            		            twoLevelId: twoLevelId,
            		            threeLevelId: threeLevelId,
            		            showLoading: true,
            		            callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
            		            	if(selectTwoObj.id.length==1){
            		            		selectTwoObj.id = "0"+selectTwoObj.id;
            		            	}
            		            	if(selectThreeObj.id.length==1){
            		            		selectThreeObj.id = "0"+selectThreeObj.id;
            		            	}
            		            	var _name = $element.name;
            		            	var _value = selectOneObj.id+"-"+selectTwoObj.id+"-"+selectThreeObj.id;
            		            	$element.value = _value;
            		            	bmContentData['bmModel'][_name] = _value;
            		            }
            		    });
            	},
            	commitBmInfo:function(){
            			//console.log("___tijiao___",this['bmModel']);
		            	/* var zxUrl = '/wx/views/subscribe/informationView.html?naiId='+naiId;
		            	Gmccui.goto(zxUrl); */
		            	//liyhi 2017-03-31 添加姓名，电话验证
		            	if(checkFromMsg(this['bmModel'])){
		            		layer.load(1,{shade:false});
		            		$("#bm").attr("disabled","disabled");
		            		$("#bm").attr("class","btnbtn1");
		            		$("#bm").removeAttr("style");
	            			Gmccui.postData("bmCmt",this['bmModel'],function(_call){
	            				if(_call['errorCode'] === '0'){
	            					//liyh1 2017-04-10 添加加载层并跳转到活动详情页面
	            					layer.load(1,{shade:false});
	            					//Gmccui.pageSwitch('#bmContent','#rsContent',fnCallBack(_call['errorCode']));
	            					alert("报名成功");
	            					//var zxUrl = '/wx/views/act.html?flag=1';//跳转到资讯页面
	            					var zxUrl = '/wx/views/sharepage/activityView.html?naiId=' + Gmccui.getQueryValue("naiId");//跳转到活动详情页面
	        		            	Gmccui.goto(zxUrl); 
	            					layer.closeAll('loading');//关闭加载层
	            				}else{
	            					alert(_call['errorMsg']);
	            				}
	            			})
	            			layer.closeAll('loading');
		            	}
           	 		}
           	 		
 			}
        });
        
        
function fnCallBack(_errCode){
	new Vue({
        el: '#rsContent',
        data: {"errorCode":_errCode}})
}

	/**
	 *liyhi
	 * 2017-03-31
	 *验证姓名，电话
	 */
	 
	 function checkFromMsg(_data){
	 	var applyName = _data.applyName;
		var applyTel = _data.applyTel;
		if(!( /^[\u0391-\uFFE5A-Za-z]+$/.test(applyName))){
			alert("姓名有误，请重填");  
	        return false;
		}
		if(!(/^1[34578]\d{9}$/.test(applyTel))){
			alert("电话号码有误，请重填");  
	        return false;
		}
		return true;
	 }
        
</script>
</body>

</html>